<template>
  <div>
    <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
    <video id="output-video" controls></video><br />
    <input type="file" id="uploader" @chang="transcode">
    <p id="message"></p>
  </div>

</template>

<script>
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
import { nextTick } from 'vue';
// const { createFFmpeg, fetchFile } = FFmpeg;

const ffmpeg = createFFmpeg({
  // corePath: 'https://unpkg.com/@ffmpeg/core@0.8.5/dist/ffmpeg-core.js',
  corePath: 'ffmpeg-core.js',
  log: true,
});

const transcode = async ({ target: { files } }) => {
  console.log('出发transcode');

  const message = document.getElementById('message');

  const { name } = files[0];

  message.innerHTML = 'Loading ffmpeg-core.js';

  await ffmpeg.load();

  ffmpeg.FS('writeFile', 'name', await fetchFile(files[0]));

  message.innerHTML = 'Start transcoding';

  await ffmpeg.run('-i', 'name', 'output.mp4');

  message.innerHTML = 'Complete transcoding';

  const data = ffmpeg.FS('readFile', 'output.mp4');

  const video = document.getElementById('output-video');

  video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));

}


nextTick(() => {
  const elm = document.getElementById('uploader');
  elm.addEventListener('change', transcode);
  console.log(elm, 'elm');
});

</script>